<template>
  <div class="auth-wrapper">
      <div class="auth-inner-wrapper">
          <div class="auth-info-wrapper">
              <div class="auth-img">
                  <ImageView
                    src="http://hbimg.huabanimg.com/a728bd522965ab072f492d84a9570886d7cf5c9e3b7a1-FFhrFc_fw658"
                    round height="100%" mode="scaleToFill"/>
              </div>
              <div class="auth-sub-title">全球免费读书</div>
          </div>
          <button class="auth-btn" open-type="getUserInfo" @getuserinfo="getUserInfo">
              授权登录
          </button>
      </div>
  </div>
</template>

<script>
  import ImageView from './ImageView'
  export default {
    components: { ImageView },
    methods: {
      getUserInfo () {
        this.$emit('getUserInfo')
      }
    }
  }
</script>

<style lang="scss" scoped>
    .auth-wrapper {
      position: fixed;
      left: 0;
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      background: #999;
      z-index: 1000;
    }
    .auth-inner-wrapper {
        width: 270px;
        height: 248px;
        background-color: #f5f5f5;
        border-radius: 18px;
        position: relative;
        .auth-info-wrapper {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin-top: 22.5px;
          .auth-img {
              width: 74px;
              height: 74px;
          }
          .auth-sub-title {
              font-size: 22px;
              color: #333;
              line-height: 22.5px;
              font-weight: 500;
              margin-top: 18px;
        }
        }

        .auth-btn {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 49px;
            line-height: 49px;
            background-image: linear-gradient(90deg, #1EA3F5 0%, #0f87fc 100%);
            border-radius: 0 0 18px 18px;
            font-size: 15px;
            color: #fff;
        }
    }
</style>
